<template>
	<view class="app column">
		<view class="main-wrap" :class="{show: true}">
			<!-- 商品列表 -->
			<view class="goods-sec">
				<view class="item row b-b">
					<image class="pic" v-if="data.courseImg" :src="'https://maxh-1305457127.cos.ap-guangzhou.myqcloud.com/'+data.courseImg" mode="aspectFill"></image>
					<view class="right column">
						<text class="title ">{{ data.courseName }}</text>
					</view>
				</view>
			</view>
			<!-- 价格信息 -->
			<view class="price-sec">
				<view class="cell row">
					<text class="tit fill">商品金额</text>
					<text class="price">{{ data.price }}</text>
				</view>
				<view class="cell row" >
					<text class="tag red">券</text>
					<text class="tit fill">优惠券</text>
					<text class="price disabled">暂无可用</text>
				</view>
			</view>
			<view class="remarks column">
				<text class="title">注：</text>
				<text class="tixing">该课程为线下课程，报名后会有客服联系你，请注意接听电话，有需要进一步了解的也可以联系客服！</text>
			</view>
			<!-- 底部栏 -->
			<view class="bot-fill-view"></view>
			<view class="bottom row"  >
				<view class="fill">
					<text class="tip">实付款：</text>
					<text class="price fill">{{ data.price}}</text>
				</view>
				<view class="btn center" @click="createOrder">
					<text>提交订单</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import productList from './components/product-list.vue'
	import couponSelect from './components/coupon-select.vue'
	export default {
		components: {
			productList,
			couponSelect
		},
		data() {
			return {
				remarks: '', //备注
				data: { },
				payTotal: 0, //支付价格
				fullReductionMoney: 0, //满减金额
			}
		},
		computed: {
		},
		onLoad(options) {
				const dataJson = JSON.parse(options.data);
				this.data = dataJson.data
				console.log(this.data);
		},
		methods: {
			//创建订单
			createOrder(){
				uni.redirectTo({
					url: '/pages/wallet/pay?data=' + JSON.stringify({
						price:this.data.price,
						courseId:this.data.id,
						teacherId:this.data.teacherId
					})
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.b-b:after{
		left: 4rpx;
		right: 4rpx;
		border-color: #ececec;
	}
	.app{
		padding: 16rpx 24rpx 20rpx;
	}
	.main-wrap{
		opacity: 0;
		transition: .2s;
		
		&.show{
			opacity: 1;
		}
	}
	.addr-sec{
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;
		
		.addr-empty{
			margin: 16rpx 0 24rpx;
			font-size: 30rpx;
			color: #666;
			
			.icon-dizhi{
				transform: translateY(0rpx);
				margin-right: 16rpx;
			}
		}
		.addr-wrap{
			display: flex;
			flex: 1;
		}
		.icon-dizhi{
			transform: translateY(6rpx);
			font-size: 32rpx;
			color: $base-color;
		}
		.icon-you{
			flex-shrink: 0;
			transform: translateY(50%);
			position: relative;
			top: -14rpx;
			font-size: 26rpx;
			color: #999;
		}
		.con{
			flex: 1;
			padding: 0 80rpx 10rpx 20rpx;;
		}
		.addr{
			margin-bottom: 16rpx;
			font-size: 30rpx;
			color: #333;
			line-height: 1.4;
			font-weight: 700;
		}
		.name{
			font-size: 28rpx;
			color: #999;
		}
		.bg{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 4rpx;
		}
	}
	.goods-sec{
		margin-top: 16rpx;
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
		overflow: hidden;
	}
	.price-sec{
		padding-top: 14rpx;
		border-radius: 0 0 10rpx 10rpx;
		background-color: #fff;
		
		.cell{
			height: 68rpx;
			padding: 0 24rpx;
			font-size: 26rpx;
			color: #333;
		}
		.price{
			font-weight: 700;
			
			&.red{
				color: $base-color;
			}
			&.disabled{
				color: #999;
				font-weight: normal;
			}
		}
		.total{
			justify-content: flex-end;
			height: 80rpx;
			padding-right: 20rpx;
			margin-top: 16rpx;
			font-size: 30rpx;
			color: #333;
			
			.price:before{
				content: '小计：';
				font-weight: normal;
			}
		}
		.tag{
			padding: 6rpx 8rpx;
			margin-right: 8rpx;
			font-size: 20rpx;
			color: #fff;
			border-radius: 8rpx;
			background-color: orange;
			
			&.red{
				background-color: $base-color;
			}
		}
		.icon-you{
			margin-left: 8rpx;
			font-size: 20rpx;
			color: #999;
		}
	}
	.remarks{
		padding: 24rpx 24rpx;
		margin-top: 16rpx;
		border-radius: 12rpx;
		background-color: #fff;
		
		.title{
			margin-bottom: 24rpx;
			font-size: 24rpx;
			color: #333;
			font-weight: 700;
		}
		.input{
			flex: 1;
			min-height: 140rpx;
			font-size: 28rpx;
			color: #333;
		}
	}
	.bot-fill-view{
		width: 100%;
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
	}
	.bottom{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 90;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx 0 rgba(0,0,0,.06);
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
		
		.tip{
			margin-left: 24rpx;
			font-size: 28rpx;
			color: #999;
		}
		.price{
			margin-right: 30rpx;
			font-size: 36rpx;
			color: $base-color;
			font-weight: 700;
			text-align: right;
		}
		.btn{
			min-width: 180rpx;
			height: 70rpx;
			padding: 0 26rpx;
			margin-right: 20rpx;
			border-radius: 100rpx;
			background-color: $base-color;
			font-size: 30rpx;
			color: #fff;
		}
	}
	.pic{
		flex-shrink: 0;
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		border-radius: 6rpx;
	}
	.right{
		flex: 1;
		color: #333;
		overflow: hidden;
	}
	.title{
		margin-right: 24rpx;
		margin-top: 0rpx;
		font-size: 30rpx;
		line-height: 40rpx;
	}
	.sku{
		height: 40rpx;
		margin: 10rpx 0 20rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #888;
	}
	.price-wrap{
		display: flex;
		align-items: baseline;
		padding-right: 20rpx;
	}
	.price{
		margin-right: 16rpx;
		font-size: 28rpx;
		line-height: 1;
		
		&:before{
			content: "￥";
			font-size: 26rpx;
		}
	}
	.number{
		font-size: 26rpx;
		color: #666;
	}
	.item{
		width: 100%;
		height: 190rpx;
		padding: 24rpx 0 24rpx 24rpx;
		background-color: #fff;
		
		&:after{
			border-color: #e5e5e5;
		}
	}
	.tixing{
		color: #82939C;
		font-size: 18rpx;
	}
</style>
